<template>
  <div>


    <!-- 侧边栏 -->
    <el-aside v-show="isSidebarVisible" width="auto" class="sidebar">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        @select="handleMenuSelect"
        :collapse="isCollapse"
        active-text-color="#409EFF"
        text-color="#fff"
      >
        <el-menu-item index="1">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-document"></i>
          <span>公告</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-user"></i>
          <span>访客管理</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span>个人设置</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-user-solid"></i>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-date"></i>
          <span>活动管理</span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-notebook-2"></i>
          <span>日志管理</span>
        </el-menu-item>
        <el-menu-item index="8">
          <i class="el-icon-chat-line-round"></i>
          <span>论坛管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '0', // 默认激活的菜单项
      isSidebarVisible: true, // 默认显示侧边栏
      isCollapse: false // 默认展开侧边栏
    };
  },
  mounted() {
    this.setActiveIndexByRoute(); // 初始化时根据当前路由设置激活项
  },
  methods: {
    setActiveIndexByRoute() {
      const route = this.$route.path;
      switch (route) {
        case '/property/home':
          this.activeIndex = '1';
          break;
        case '/property/announcements':
          this.activeIndex = '2';
          break;
        case '/property/visitor':
          this.activeIndex = '3';
          break;
        case '/property/personal':
          this.activeIndex = '4';
          break;
        case '/property/user':
          this.activeIndex = '5';
          break;
        case '/property/activity':
          this.activeIndex = '6';
          break;
        case '/property/log':
          this.activeIndex = '7';
          break;
        case '/property/forum':
          this.activeIndex = '8';
          break;
      }
    },
    handleMenuSelect(index) {
      const currentRoute = this.$route.path;
      switch (index) {
        case '1':
          if (currentRoute !== '/property/home') {
            this.$router.push('/property/home');
          }
          break;
        case '2':
          if (currentRoute !== '/property/announcements') {
            this.$router.push('/property/announcements');
          }
          break;
        case '3':
          if (currentRoute !== '/property/visitor') {
            this.$router.push('/property/visitor');
          }
          break;
        case '4':
          if (currentRoute !== '/property/personal') {
            this.$router.push('/property/personal');
          }
          break;
        case '5':
          if (currentRoute !== '/property/user') {
            this.$router.push('/property/user');
          }
          break;
        case '6':
          if (currentRoute !== '/property/activity') {
            this.$router.push('/property/activity');
          }
          break;
        case '7':
          if (currentRoute !== '/property/log') {
            this.$router.push('/property/log');
          }
          break;
        case '8':
          if (currentRoute !== '/property/forum') {
            this.$router.push('/property/forum');
          }
          break;
      }
    },
    // 切换侧边栏显示状态
    toggleSidebar() {
      this.isSidebarVisible = !this.isSidebarVisible;
    }
  }
};
</script>

<style scoped>
.sidebar {
  height: 100vh;
  background-color: #545c64;
}

.el-menu {
  border-right: none;
  background-color: #545c64;
}

.el-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  line-height: 60px;
}

.el-menu-item:hover {
  background-color: #434a50;
}

.el-menu-item.is-active {
  background-color: #434a50 !important; /* 保持与 hover 状态一致 */
}

/* Logo 控制按钮样式 */
.sidebar-toggle-logo {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  width: 40px; /* 调整 Logo 大小 */
  height: 40px;
  cursor: pointer; /* 鼠标悬停时显示为手型 */
}

/* 侧边栏展开时的宽度 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>